<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="tarjetapersonaform.title"/></title>
    <meta name="heading" content="<fmt:message key='tarjetapersonaform.heading'/>"/>
</head>

<spring:bind path="tarjetaPersona.*">
    <c:if test="${not empty status.errorMessages}">
    <div class="error">
        <c:forEach var="error" items="${status.errorMessages}">
            <img src="<c:url value="/images/iconWarning.gif"/>"
                alt="<fmt:message key="icon.warning"/>" class="icon"/>
            <c:out value="${error}" escapeXml="false"/><br />
        </c:forEach>
    </div>
    </c:if>
</spring:bind>

<form:form commandName="tarjetaPersona" method="post" action="tarjetapersonagroupform.html" 
	onsubmit="return onFormSubmit(this)" id="tarjetapersonagroupform">
<form:hidden path="id"/>

<ul>
    <li class="buttonBar right">
        <%-- So the buttons can be used at the bottom of the form --%>
        <c:set var="buttons">
            <input type="submit" class="button" name="save" onclick="bCancel=false" value="<fmt:message key="button.save"/>"/>
            
		    <input type="button"  class="button"  name="cancelar" onclick="location.href='<c:url value="/tarjetapersona/tarjetapersonalist.html"/>'"
		        value="<fmt:message key="button.cancel"/>"/>            
        </c:set>
        <c:out value="${buttons}" escapeXml="false"/>
    </li>
    
    <li>
    <label for="numeroInicio" class="required desc">
	         <fmt:message key="common.inicio"/><span class="req">*</span></label>
        <form:errors path="numeroInicio" cssClass="fieldError"/>
        <form:input path="numeroInicio" id="numeroInicio" cssClass="text medium" cssErrorClass="text medium error" maxlength="11"/>
    </li>
    
    <li>
    <label for="numeroFin" class="required desc">
	         <fmt:message key="common.fin"/><span class="req">*</span></label>
        <form:errors path="numeroFin" cssClass="fieldError"/>
        <form:input path="numeroFin" id="numeroFin" cssClass="text medium" cssErrorClass="text medium error" maxlength="11"/>
    </li>    
    
    <li>
        <label  class="required desc">
         <fmt:message key="common.tipo.tarjeta"/><span class="req">*</span>
        </label>
        <form:errors path="coTipoTarjetaPersona" cssClass="fieldError"/>
        <form:select cssClass="text medium" id="coTipoTarjetaPersona" path="coTipoTarjetaPersona">
        	<form:options itemValue="id" items="${tiposTarjetasPersonas}"/>
        </form:select>        
    </li>       

    <li>
    <label for="daFechaInicioVigencia" class="required desc">
	         <fmt:message key="common.vigencia.inicio"/><span class="req">*</span></label>
        <form:input path="daFechaInicioVigencia" id="daFechaInicioVigencia" size="11"/>
        <input type="button" class="buttoncal" id="daFechaInicioVigenciaCal" value="..."/>  [<fmt:message key="date.format"/>]
        <form:errors path="daFechaInicioVigencia" cssClass="fieldError"/> 
		<script type="text/javascript">
	    	new Calendar({
                inputField: "daFechaInicioVigencia",		// id of the input field
                dateFormat: "%d/%m/%Y",
                trigger	: "daFechaInicioVigenciaCal",	// id of the button
                bottomBar	: false,
                onSelect	: function() {
	    			this.hide();
            		  //frk: si se quiere utilizar dejo esta linea de codigo
                    //var date = Calendar.intToDate(this.selection.get());
                }
        	});		   	 
		</script>               
    </li> 
         
    <li>
    <label for="daFechaFinVigencia" class="required desc">
	         <fmt:message key="common.vigencia.fin"/><span class="req">*</span></label>
        <form:input path="daFechaFinVigencia" id="daFechaFinVigencia" size="11"/>
        <input type="button" class="buttoncal" id="daFechaFinVigenciaCal" value="..."/>  [<fmt:message key="date.format"/>]
        <form:errors path="daFechaFinVigencia" cssClass="fieldError"/> 
		<script type="text/javascript">  
	    	new Calendar({
                inputField: "daFechaFinVigencia",		// id of the input field
                dateFormat: "%d/%m/%Y",
                trigger	: "daFechaFinVigenciaCal",	// id of the button
                bottomBar	: false,
                onSelect	: function() {
	    			this.hide();
            		  //frk: si se quiere utilizar dejo esta linea de codigo
                    //var date = Calendar.intToDate(this.selection.get());
                }
        	});		   	
		</script>               
    </li>          
         
    <li>
        <appfuse:label styleClass="desc" key="common.observaciones"/>
        <form:errors path="deObservaciones" cssClass="fieldError"/>
        <form:textarea path="deObservaciones" id="deObservaciones" cssClass="text medium" cssErrorClass="text medium error"/>
    </li>     
   
    <li class="buttonBar bottom">
        <c:out value="${buttons}" escapeXml="false"/>
    </li>
</ul>
</form:form>

<script type="text/javascript">
    Form.focusFirstElement($('tarjetapersonagroupform'));
    highlightFormElements();  
  
	function onFormSubmit(theForm) {

	  	var daFechaInicioVigencia = dwr.util.getValue("daFechaInicioVigencia");
	  	var daFechaFinVigencia = dwr.util.getValue("daFechaFinVigencia");
	  	return comparingDates(daFechaInicioVigencia , daFechaFinVigencia,
		  			 '<fmt:message key="common.vigencia.inicio"/>', '<fmt:message key="common.vigencia.fin"/>') 
			&& validateTarjetaPersona(theForm) && deshabilitarOpcionGuardar();
	}    

	function deshabilitarOpcionGuardar(){

		var botones = document.getElementsByName("save");
		for(var i=0; i < botones.length; i++){
			var boton = botones[i];
			boton.disabled=true;
		}

		botones = document.getElementsByName("cancelar");
		for(var i=0; i < botones.length; i++){
			var boton = botones[i];
			boton.disabled=true;
		}		
		return true;
	}

</script>
<v:javascript formName="tarjetaPersona" staticJavascript="false"/>
<script type="text/javascript" src="<c:url value="/scripts/validator.jsp"/>"></script>